<template>
	<view>
		<view class="nav-bar">
			<view class="search-bar">
				<u--input v-model="searchStr" placeholder="家常菜" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
					<template slot="suffix">
						<u-icon v-show="searchStr" @click="clearSearchStr" name="close-circle-fill" color="#909399"></u-icon>
					</template>
				</u--input>
			</view>
			<!-- {{searchStr}} -->
			<view class="cancel-btn" @click="goBack">
				取消
			</view>
		</view>
		<!-- {{suggests}} -->
		<u-list v-show="searchStr">
			<u-list-item v-for="(s, i) in suggests" :key="i">
				<u-cell :title="s.name" @click="goSearch(s.name)">
					<u-tag v-if="s.tag" slot="right-icon" shape="circle" :text="s.tag.name" size="mini"
						:bgColor="s.tag.background_color" :color="s.tag.text_color" :borderColor="s.tag.border_color"></u-tag>
				</u-cell>
			</u-list-item>
		</u-list>

		<view class="hot-search-wrap" v-show="!searchStr && searchHistoryArr.length">
			<view class="wrap-title">
				历史搜索
			</view>
			<view class="hot-search-label" v-for="s in searchHistoryArr" :key="s" @click="goSearch(s)">
				{{s}}
			</view>
		</view>

		<view class="hot-search-wrap" v-show="!searchStr">
			<view class="wrap-title">
				热门搜索
			</view>
			<view class="hot-search-label" v-for="(h,i) in hotSearch" :key="i" @click="goSearch(h.title)"
				:style="{color: h.color, border: `1px solid ${h.borderColor}`, backgroundColor: h.background_color}">
				{{h.title}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	import {
		debounce
	} from '../../untils/tool.js'
	
	const SEARCHHISTORY = 'searchHistory'

	export default {
		data() {
			return {
				searchStr: '',
				suggests: [],
				hotSearch: [],
				searchHistoryArr: [],
				focus: false
			}
		},
		onLoad() {
			console.log('search load');
			uni.$on('back', () => {
				console.log('back了');
				this.$nextTick(() => {
					this.focus = true
				})
			})
		},
		created() {
			// 获取localstorage获取本地持久化的搜索历史
			this.searchHistoryArr = uni.getStorageSync(SEARCHHISTORY)
			this._getSearchSuggests = debounce(300, this.getSearchSuggests)
			this.getHotSearchArr()
		},
		methods: {
			clearSearchStr() {
				console.log('clear');
				this.searchStr = ''
			},
			goBack() {
				uni.navigateBack()
			},
			getSearchSuggests(kw) {
				// console.log('kw', kw);
				// kw = kw.trim()

				if (kw) {
					http('recipe/search/suggests?kw=' + kw).then((res) => {
						console.log(res.result.suggests);
						this.suggests = res.result.suggests
					})
				}
			},
			async getHotSearchArr() {
				let {
					result
				} = await http('recipe/search/hot')

				console.log('热门搜索', result.suggestdetails);
				this.hotSearch = result.suggestdetails
			},
			goSearch(kw) {
				this.searchStr = kw
				// uni.navigateTo({
				// 	url: '/pages/SearchDetail/SearchDetail?kw=' + kw
				// })
				
				// 每次存入前先获取之前存入的值
				let data = uni.getStorageSync(SEARCHHISTORY) || []
				console.log('storage sync', data);
				
				// 返回值为真保留，为假删除
				data = data.filter(item => item !== kw)
				
				uni.setStorage({
					key: SEARCHHISTORY,
					data: [kw, ...data]
				})
				
				this.searchHistoryArr = [kw, ...data]
				
				uni.navigateTo({
					url: '/pages/searchDetail/searchDetail?kw=' + kw
				})
			}
		},
		watch: {
			searchStr(newValue) {
				let kw = newValue.trim()
				// this._getSearchSuggests(newValue)

				if (!kw) {
					this.suggests = []
				}
				this._getSearchSuggests(kw)
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 20px;

		.search-bar {
			flex: 1;
			background-color: #eee;
		}

		.cancel-btn {
			margin-left: 15px;
			// padding-right: 20px;
			font-size: 12px;
			color: #666;
		}
	}

	.hot-search-wrap {
		padding: 20rpx;

		.wrap-title {
			margin-bottom: 20rpx;
			font-size: 14px;
			font-weight: 600;
		}

		.hot-search-label {
			float: left;
			margin: 0 20rpx 20rpx 0;
			padding: 4px 6px;
			border-radius: 4px;
			background-color: rgb(250, 250, 250);
		}

		&::before,
		&::after {
			display: block;
			clear: both;
			content: '';
		}
	}
</style>